// 选择弹出层插件 
;
(function(win, undefined) {
	// 方法主体，不暴露
	let _this = null;
	let popup = function(options) {
		_this = this;
		// 参数
		this.options = {
			type: 0, //类型， 0：单选  1：多选
			title: '选择面板', //弹出层标题
			cancelText: "取消", //取消按钮文案
			cancelFunc: () => {}, //取消回调
			confirmText: "确认", //确认按钮文案
			confirmFunc: () => {}, //确认回调
			list: [],
			checkedList: [], //已经选中的选项：{label:'',value:''}
			...options
		};
		//内部参数
		this.checkingList = []; //多选未点确认时选择的内容
		this.popupEles = null
		// 初始化
		this.init();
	};
	popup.prototype = {
		// 初始化
		init() {
			// 创建
			this.create();
		},
		
		//数据选中
		checkItem(element) {
			const value = element.getAttribute('data-id')
			const check = this.checkingList.some((item) => item.value === value)
			if (check) { //如果已经选中，那么取消选中
				element.style.color = '#333333'
				this.checkingList = this.checkingList.filter((item) => {
					return item.value !== value
				})
			} else { //选中
				element.style.color = '#3c9cff'
				const label = element.innerText
				let params = {
					value,
					label
				}
				if (this.options.type === 0) {
					this.checkingList = [] //因为是单选，所以加一个清空
				}

				this.checkingList.push(params)
			}
			if (this.options.type === 0) {
				this.confirmFunc()
			}
		},
		
		// 显示
		show() {
			this.popupEles.select_popup.style.display = 'flex'
			this.popupEles.select_popup.classList.add('popup_show')
			// 回显选中的数据
			this.checkingList = JSON.parse(JSON.stringify(this.options.checkedList))
			if (this.checkingList.length > 0) {
				const liList = this.popupEles.select_popup_ul.querySelectorAll('li')
				liList.forEach((item) => { //进行回显
					const value = item.getAttribute('data-id')
					if (this.options.checkedList.some((item) => item.value === value)) {
						item.style.color = '#3c9cff'
					} else {
						item.style.color = '#333333'
					}
				})
			}

		},
		//关闭选择弹框
		close: function() {
			this.popupEles.select_popup.style.display = 'none'
			this.popupEles.select_popup.classList.remove('popup_show')
		},
		// 取消事件
		cancelFunc() {
			_this.close();
			// 通知取消
			_this.options.cancelFunc();
		},
		// 确认按钮点击事件
		confirmFunc() {
			// 回调
			_this.options.confirmFunc(_this.checkingList);
			// 关闭
			_this.close();
		},
		// 创建
		create() {
			let select_popup = document.createElement("div");
			select_popup.className = "popup";
			select_popup.id = "popup";
			// 背景
			let select_popup_bg = document.createElement("div");
			select_popup_bg.className = "mask";
			//先push背景
			select_popup.appendChild(select_popup_bg);
		
			// 内容盒子
			let select_popup_inner = document.createElement("div");
			select_popup_inner.className = "popup-main";
		
			//头部
			let select_popup_head = document.createElement("div");
			select_popup_head.className = "popup-title";
			//取消按钮
			let select_popup_cancel = document.createElement("span");
			select_popup_cancel.innerHTML = "取消";
			//标题
			let select_popup_title = document.createElement("p");
			select_popup_title.innerHTML = this.options.title;
			//确认按钮
			let select_popup_confirm = document.createElement("span");
			select_popup_confirm.innerHTML = "确认";
			//如果是多选，增加取消和确认按钮
			if (this.options.type === 1) {
				select_popup_head.appendChild(select_popup_cancel)
			}
			select_popup_head.appendChild(select_popup_title) //设置标题
			if (this.options.type === 1) {
				select_popup_head.appendChild(select_popup_confirm)
			}
			//body中的内容
			let select_popup_body = document.createElement("div");
			select_popup_body.className = "popup-body";
			//ul列表
			let select_popup_ul = document.createElement("ul");
			select_popup_ul.className = "popup-ul";
			select_popup_ul.id = "popupUl";
			select_popup_body.appendChild(select_popup_ul)
			//将头部和bodypush到内容盒子中
			select_popup_inner.appendChild(select_popup_head)
			select_popup_inner.appendChild(select_popup_body)
		
			//最后push内容盒子
			select_popup.appendChild(select_popup_inner);
			//最后push到页面中
			document.body.appendChild(select_popup);
			this.popupEles = {
				select_popup,
				select_popup_bg,
				select_popup_inner,
				select_popup_head,
				select_popup_cancel,
				select_popup_title,
				select_popup_confirm,
				select_popup_body,
				select_popup_ul
			}
			// 初始化 事件
			this.initEvent();
			this.getList()
		},
		// 初始化事件
		initEvent() {
			// 背景点击事件
			this.popupEles.select_popup_bg.addEventListener("click", this.cancelFunc, false)
			// 取消按钮点击事件
			this.popupEles.select_popup_cancel.addEventListener("click", this.cancelFunc, false)
			// 确认按钮点击事件
			this.popupEles.select_popup_confirm.addEventListener("click", this.confirmFunc, false)
		
		},
		// 移除事件
		removeEvent() {
			// 背景点击事件
			this.popupEles.select_popup_bg.removeEventListener("click", this.cancelFunc, false)
			// 取消按钮点击事件
			this.popupEles.select_popup_cancel.removeEventListener("click", this.cancelFunc, false)
			// 确认按钮点击事件
			this.popupEles.select_popup_confirm.removeEventListener("click", this.confirmFunc, false)
		},
		// 设置li列表
		getList() {
			for (let i = 0; i < this.options.list.length; i++) {
				const item = this.options.list[i]
				let liEle = document.createElement("li");
				liEle.setAttribute('data-id', item.value)
				liEle.innerHTML = item.label
				// 监听点击事件
				liEle.onclick = function() {
					_this.checkItem(this)
				}
				this.popupEles.select_popup_ul.appendChild(liEle)
			}
		},
		// 销毁
		destroy() {
			try {
				// 删除 html
				this.popupEles.select_popup.remove();
				// 移除事件
				this.removeEvent();
				dateFuncObj = null;
			} catch (err) {}
		},
	}
	// 暴露的方法
	// 关键代码（单列模型）
	let popupObj = null;

	let popupFunc = function(options) {
		// 没参数
		if (typeof options == "undefined") {
			options = {};
		}
		// 参数格式错误
		if (typeof options != "object") {
			throw "参数格式错误！";
		}
		//校验选项
		if( !options.list||options.list.length===0){
			throw "请传递选项列表！";
		}
		if (popupObj) {
			// 已创建，销毁
			popupObj.destroy();
		}
		// 创建
		popupObj = new popup(options);
	};

	// 打开方法
	popupFunc.prototype.show = function() {
		if (popupObj) {
			popupObj.show();
		} else {
			throw "请先创建！";
		}
	};
	// 销毁方法
	popupFunc.prototype.destroy = function() {
		if (popupObj) {
			popupObj.destroy();
		}
	};

	// 抛出
	win.popup = popupFunc;
}(window))
